﻿<div class="ui-widget-content">
    <h3>Tabs</h3>
    <p>
       Tabs são usadas para separar o conteúdo em sessões que podem ser alternadas economizando espaço e deixando o layout mais rico.
    </p>

    <div id="meu_tab">
        <ul>
            <li><a href="#tabs-1_1">tab 1</a></li>
            <li><a href="#tabs-2_1">tab 2</a></li>
            <li><a href="#tabs-3_1">tab 3</a></li>
        </ul>
        <div id="tabs-1_1">
            <p>Aqui vai o conteúdo da tab 1.</p>
        </div>
        <div id="tabs-2_1">
            <p>Podemos colocar qualquer conteúdo aqui, e aparecerá na tab 2.</p>
        </div>
        <div id="tabs-3_1">
            <p>A tab 3 tem mais conteúdo aqui.</p>
        </div>
    </div>

    <p>
        Veja como é simples:
        <pre>$('#meu_tab').tabs();</pre>

        HTML:
        <pre>&lt;div id=&quot;meu_tab&quot;&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href=&quot;#tabs-1&quot;&gt;tab 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#tabs-2&quot;&gt;tab 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#tabs-3&quot;&gt;tab 3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div id=&quot;tabs-1&quot;&gt;
      &lt;p&gt;Conteúdo tab 1&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id=&quot;tabs-2&quot;&gt;
      &lt;p&gt;Conteúdo tab 2&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id=&quot;tabs-3&quot;&gt;
      &lt;p&gt;Conteúdo tab 3&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre>
    </p>
    <script type="text/javascript">
        inicializador.tabsInit = function() {
            $('#meu_tab').tabs();
        };
    </script>
</div>
